<div id="chat_messages" hx-swap-oob="beforeend"> 

<div class="fade-in-up">
{% include 'a_rtchat/chat_message.html' %}
</div>

<style>
    @keyframes fadeInAndUp {
        from { opacity: 0; transform: translateY(12px); }
        to { opacity: 1; transform: translateY(0px); }
    }
    .fade-in-up {
        animation: fadeInAndUp 0.6s ease;
    }
</style>

<script>scrollToBottom()</script>

</div>


{% with user=message.author %}
    {% if user in chat_group.users_online.all %}
    <div id="user-{{ user.id }}" class="green-dot border-2 border-gray-800 absolute -bottom-1 -right-1"></div>
    {% else %}
    <div id="user-{{ user.id }}" class="gray-dot border-2 border-gray-800 absolute -bottom-1 -right-1"></div>
    {% endif %}
{% endwith %}
